<template>
    <div class="home">
        <el-container>
            <el-header>叩丁狼电商运营平台
                <el-icon style="vertical-align: middle" @click="isCollapse = !isCollapse">
                    <Menu />
                </el-icon>
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{ userStore.username }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="home">首页</el-dropdown-item>
                            <el-dropdown-item command="out">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-container>
                <div class="aside">
                    <el-aside width="fit-content">
                        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                            :default-active="defaultActive" text-color="#fff" router unique-opened :collapse="isCollapse">
                            <el-menu-item :index="'/index'">
                                <i class="iconfont homepage"></i>
                                <span>首页</span>
                            </el-menu-item>
                            <el-sub-menu :index="index + ''" v-for="item, index in menuRoutes" :key="item.id">
                                <template #title>
                                    <i class="iconfont" :class="item.icon"></i>
                                    <span>{{ item.title }}</span>
                                </template>
                                <template v-for="citem, index in item.children" :key="item.id">
                                    <el-menu-item :index="'/' + item.name + '/' + citem.name" v-if="!citem.hidden"><i
                                            class="iconfont" :class="citem.icon"></i>{{ citem.title }}</el-menu-item>
                                </template>
                            </el-sub-menu>
                        </el-menu>
                    </el-aside>
                </div>
                <el-main>
                    <routerView></routerView>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>
<script lang="ts">
export default {
    name: "MyHome"
}
</script>
<script setup lang="ts">
import { loginout } from "@/comon"
import { ArrowDown, Menu } from '@element-plus/icons-vue'
import { useUserStore } from "@/store/model/user"
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const isCollapse = ref(false)
const defaultActive = ref("/index")
const menuRoutes = computed(() => {
    return userStore.getMenusRoutes
})
watch(() => route.path, (newVal) => {
    // console.log(newVal);
    defaultActive.value = newVal
},
    {
        immediate: true
    })
const handleCommand = (command: string | number | object) => {
    // ElMessage(`click on item ${command}`)
    if (command == "home") {
        router.push("/index")
    } else if (command == "out") {
        loginout(() => {

        }, () => {
            // 提示
            ElMessage.success(`退出成功`)
        })


    }

}
</script>

<style scoped lang="scss">
.home {
    .aside {
        position: fixed;
        top: 60px;
        height: 100vh;
        background-color: #545c64;
    }

    :deep(.el-container) {
        .el-header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #409eff;
            line-height: 60px;
            color: #fff;
            font-size: 22px;
            z-index: 6;
        }

        .el-menu {
            border-right: none;
        }

        .el-dropdown {
            margin-top: 21px;
            float: right;
            color: #fff;
        }
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 220px;
        min-height: 400px;
    }
    :deep(.el-main) {
            padding: 0;
            margin-top: 60px;
            margin-left: 220px;
        }
    :deep(.admin) {
          margin-top: 65px;
        }
}
</style>